<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>个人中心</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css" />
  <link rel="stylesheet" href="./css/my.css" />
</head>

<body>
  <!-- 头部区域 -->
  <header>
    <div class="top">
      <img src="http://cba.itlike.com/public/mweb/static/background/user-header2.png" alt="" />
      <div class="user">
        <div class="left">
          <img src="http://cba.itlike.com/public/mweb/static/default-avatar.png" alt="" />
        </div>
        <div class="right">
          <h1>未登录</h1>
          <p>点击登陆账号</p>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <a href="#" class="flex">
          <span id="money">--</span>
          <p>账户余额</p>
        </a>
        <a href="#" class="flex">
          <span id="points">--</span>
          <p>积分</p>
        </a>
        <a href="#" class="flex">
          <span id="coupon">--</span>
          <p>优惠券</p>
        </a>
      </div>
      <div class="right">
        <a href="#" class="flex">
          <span class="iconfont icon-qianbao"></span>
          <p>我的钱包</p>
        </a>
      </div>
    </div>
  </header>
  <!-- 主体区域 -->
  <div class="main">
    <!-- 订单区域 -->
    <div class="order">
      <a href="#" class="flex">
        <span class="iconfont icon-dingdan"></span>
        <p>全部订单</p>
      </a>
      <a href="#" class="flex">
        <span class="iconfont icon-qianbao"></span>
        <p>待支付</p>
      </a>
      <a href="#" class="flex">
        <span class="iconfont icon-huoche"></span>
        <p>待发货</p>
      </a>
      <a href="#" class="flex">
        <span class="iconfont icon-icon-receive"></span>
        <p>待收货</p>
      </a>
    </div>
    <!-- 服务区域 -->
    <div class="service">
      <p>我的服务</p>
      <div class="one">
        <a href="#" class="flex">
          <span class="iconfont icon-dizhi"></span>
          <p>收货地址</p>
        </a>
        <a href="#" class="flex">
          <span class="iconfont icon-lihe"></span>
          <p>领券中心</p>
        </a>
        <a href="#" class="flex">
          <span class="iconfont icon-weibiaoti2fuzhi02"></span>
          <p>优惠券</p>
        </a>
        <a href="./help/index.html" class="flex">
          <span class="iconfont icon-bangzhu"></span>
          <p>我的帮助</p>
        </a>
        <a href="#" class="flex">
          <span class="iconfont icon-jifen"></span>
          <p>我的积分</p>
        </a>
        <a href="#" class="flex">
          <span class="iconfont icon-shouhou"></span>
          <p>退换/售后</p>
        </a>
      </div>
    </div>
    <!-- 退出登录按钮 -->
    <div class="logout">
      <div id="mylogout">退出登录</div>
    </div>
    <!-- 弹窗事件 -->
    <div class="care">
      <h1>友情提示</h1>
      <p>您确定要退出登录吗?</p>
      <div class="bottom">
        <i>取消</i>
        <em>确定</em>
      </div>
    </div>
    <!-- 遮罩 -->
    <div class="mask"></div>
  </div>
  <!-- 底部区域 -->
  <footer>
    <a href="./index.html">
      <span class="iconfont icon-shouye"></span>
      <p>首页</p>
    </a>
    <a href="./classify.html">
      <span class="iconfont icon-tubiao_fenlei"></span>
      <p>分类</p>
    </a>
    <a href="./shopingcart.html">
      <span class="iconfont icon-gouwuche"></span>
      <p>购物车</p>
    </a>
    <a href="#" class="active">
      <span class="iconfont icon-wode-copy"></span>
      <p>我的</p>
    </a>
  </footer>
  <script src="./js/axios.js"></script>
  <script src="./js/common.js"></script>
  <script>
    if (
      !(localStorage.getItem('userToken') && localStorage.getItem('userId'))
    ) {
      document.querySelector('.user').addEventListener('click', () => {
        location.href = './login.html'
      })
      mylogout.style.display = 'none'
    } else {
      console.log(localStorage.getItem('userToken'))
      const h1 = document.querySelector('.right h1')
      const p = document.querySelector('.right p')
      const money = document.querySelector('#money')
      const points = document.querySelector('#points')
      const coupon = document.querySelector('#coupon')
      const mylogout = document.querySelector('#mylogout')
      mask = document.querySelector('.mask')
      const care = document.querySelector('.care')
      async function render() {
        try {
          let { data: res } = await axios.get(
            'http://cba.itlike.com/public/index.php?s=/api/user/info',
            {
              headers: {
                'Access-Token': localStorage.getItem('userToken'),
                platform: 'H5'
              }
            }
          )
          console.log(res)
          mylogout.style.display = 'block'
          h1.innerHTML = res.data.userInfo.nick_name
          p.innerHTML = res.data.userInfo.mobile
          points.innerHTML = res.data.userInfo.points
          coupon.innerHTML = 0
          money.innerHTML = (
            res.data.userInfo.balance - res.data.userInfo.expend_money
          ).toFixed(2)
        } catch {
          tip('网络错误,请稍后重试')
        }
      }
      render()

      // 退出事件
      mylogout.addEventListener('click', function () {
        care.style.display = 'block'
        mask.style.display = 'block'
      })

      care.addEventListener('click', function (e) {
        if (e.target.tagName === 'I') {
          care.style.display = 'none'
          mask.style.display = 'none'
        }
        if (e.target.tagName === 'EM') {
          localStorage.removeItem('userToken')
          localStorage.removeItem('userId')
          care.style.display = 'none'
          mask.style.display = 'none'
          location.href = './my.html'
        }
      })
    }
  </script>
</body>

</html>